import { withPixiApp, Container } from '@inlet/react-pixi'
import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { projectLabelView as projectDuck, canvas as canvasDuck } from 'ducks'
import { GuideLine } from '../brushes'

const LabelsContainerView = ({
  scale, pointer, width, height, isGuideLineActive,
}) => {
  if (isGuideLineActive) {
    return (
      <Container>
        <GuideLine scale={scale} x={pointer[0]} y={pointer[1]} width={width} height={height} />
      </Container>
    )
  }
  return null
}

LabelsContainerView.propTypes = {
  scale: PropTypes.number.isRequired,
}

const mapStateToProps = state => ({
  pointer: projectDuck.selectors.pointer(state),
  isGuideLineActive: projectDuck.selectors.isGuideLineActive(state),
})

export default withPixiApp(connect(mapStateToProps)(LabelsContainerView))
